<template>
  <view class="page-container">
    <!-- 搜索组件 -->
    <nav-bar @load="handleLoadNav">
      <view class="uni-easyinput-head">
        <uni-easyinput prefixIcon="search" disableColor="#fff" placeholder="请输入内容" @confirm="handleQueryChange" @input="handleQueryChange"
          @clear="handleClear">
        </uni-easyinput>
      </view>
    </nav-bar>
    <view class="content" :style="{ height: contentHeight + 'px' }">
      <custom-scroll-view :scrollHeight="contentHeight" :loadData="handleLoadData" ref="listRef" emptyText="暂无关注">
        <template v-slot="{data}">
          <view v-for="item in data.data" :key="item.userId" class="user-for-item">
            <user-item @status-change="handleStatusChange" :userType="0" :userObj="item">
            </user-item>
          </view>
        </template>
      </custom-scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    getMyFansApi
  } from "@/api/my/fans.js";
  export default {
    data() {

      return {
        query: "",
        contentHeight: 0 //scorll高度
      };
    },
    onLoad() {
      this.handleClear();
    },
    methods: {
      handleLoadNav({
        navHeight,
        height
      }) {
        this.contentHeight = height - navHeight;
      },
      handleClear() {
        this.query = "";
        this.$refs.listRef.handleRefresher(true);
      },
      // 加载数据
      async handleLoadData(page) {
        let {
          data: res
        } = await getMyFansApi(0, page, this.query);
        console.log(res);
        let data = {
          data: res.success ? res.data.records : [],
          pages: res.success ? res.data.pages : 0,
          success: res.success
        };
        return data;
      },
      // 搜索内容发生变化
      handleQueryChange(query) {
        this.query = query;
        this.$refs.listRef.handleRefresherLoad();
      },
      // 用户关注状态改变事件
      handleStatusChange({
        id,
        fansState
      }) {
        const item = this.$refs.listRef.data.data.find(item => item.userId == id);
        if (item) {
          item.fansState = !fansState
        }
      },

    }
  }
</script>

<style lang="scss" scoped>
  .page-container {
    width: 100%;
    background: #eef2f4;

    .content {
      width: 100%;


      .user-for-item {
        width: 100%;
        padding: 32rpx;
        box-sizing: border-box;
        border-bottom: 1px solid #D1D1D1;
        background-color: #ffffff;
      }
    }
  }
</style>